<div id="response" class="section-profile">
    <div class="row">
        <div class="topleft duk-icon"><img onclick="removeSection('response')" src="/gui/img/x.png"></div>
        <div class="column section-border" style="flex:25%;text-align:left;padding:15px;">
            <h1 style="font-size:70px;margin-top:-20px;">Response</h1>
            <h4 style="margin-top:-40px">the autonomous incident responder</h4>
            <p>
                Think of <i>response</i> as the blue version of the stockpile plugin. Specific blue team response
                actions are stored here as abilities. Instead of adversaries,you'll find defenders, which can be
                launched on a host to protect it against an attacker.
            </p>
            <select id="auto-response-select">
                {% for adv in adversaries %}
                    {% if adv.adversary_id == auto_response.adversary_id %}
                        <option id="auto-{{ adv.adversary_id }}" value="{{ adv.adversary_id }}" selected>{{ adv.name }}</option>
                    {% else %}
                        <option id="auto-{{ adv.adversary_id }}" value="{{ adv.adversary_id }}">{{ adv.name }}</option>
                    {% endif %}
                {% endfor %}
            </select>
            <button id="save-auto-response" type="button" class="button-success atomic-button" onclick="saveAutoResponse()">Save</button>
        </div>
        <div class="column" style="flex:75%">
            <div class="column" style="flex:67%;padding:15px;text-align: left">
                <div class="row inner-row" style="background-color: inherit;margin: -45px -50px -50px;">
                    <div class="column duk-home" style="flex:33%;border-right: solid white 1px;line-height: 10px;">
                        <img src="/gui/img/payload.png"/>
                        <h3><span style="color:lightblue;font-weight: 900;">abilities</span></h3>
                        <h1>{{ abilities|length }}</h1>
                    </div>
                    <div class="column duk-home" style="flex:33%;line-height: 10px;">
                        <img src="/gui/img/hacker.png"/>
                        <h3><span style="color:green;font-weight: 900;">defenders</span></h3>
                        <h1>{{ adversaries|length }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function saveAutoResponse() {
        function streamUpdate() {
            stream('Auto responder has been updated');
        }
        restRequest('POST', {'adversary_id': $('#auto-response-select').val()}, streamUpdate, '/plugin/responder/update');
    }
</script>
